<%--
  Created by IntelliJ IDEA.
  User: ruia
  Date: 2021/10/28
  Time: 1:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
  <title>MyPetStore</title>
  <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
  <meta http-equiv="Cache-Control" content="max-age=0" />
  <meta http-equiv="Cache-Control" content="no-cache" />
  <meta http-equiv="expires" content="0" />
  <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
  <meta http-equiv="Pragma" content="no-cache" />

  <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
  <link rel="StyleSheet" href="css/jquery-ui.css" type="text/css"/>
  <script type="text/javascript" src="/js/jquery-ui.js"></script>
  <link rel="StyleSheet" href="css/jpetstore.css" type="text/css" media="screen" />

  <script type="text/javascript" >
    $(document).ready(function(){
      $('#login-link').click(function ( event ){
        event.preventDefault();
        console.log("111");
        showLoginCard();
      });

      $('#login-link-proceed').click(function ( event ){
        event.preventDefault();

        showLoginCard();
      });

      hideLoginCard();

      $('#login-card-closebtn').bind('click', function ( event ){
        hideLoginCard();
        event.stopPropagation();
      })

      $('#loginForm').on('submit', function (e) {
        e.preventDefault();
        $.ajax({
          type: 'post',
          url: 'signOn',
          data: $('form').serialize(),
          success: function ( result ) {
            if(result == 'Log-in Succeed'){
              hideLoginCard();
              var $loginLink = $('#login-link');
              let $accountLinks = $('<a href="signOff">Sign Out</a>\n' +
                      '                 <img align="middle" src="images/separator.gif" />\n' +
                      '                 <a href="editAccount">My Account</a>');
              $loginLink.after($accountLinks);
              $loginLink.remove();

              if($('#to-check-out').length != 0 ){
                let $checkoutLink = $('<a href="proceedToCheckOut" class="btn">Proceed to Checkout</a>');
                $('#to-check-out').append($checkoutLink);
              }

              if($('#note').length != 0 ){
                $('#note').remove();
              }

            }else{
              alert('Invalid username or password. Please try later.');
            }
          },
          error: function (){
            console.log('log-in ajax error');
          }
        });

      });

    })

    var hideLoginCard = function (){
      $('#login-card').css( 'visibility', 'hidden' );
      $('#log-in-card-background').css( 'visibility', 'hidden' );

    }

    var showLoginCard = function (){
      console.log("123");
      $('#login-card').css( 'visibility', 'visible' );
      $('#log-in-card-background').css( 'visibility', 'visible' );

      console.log(456);
      return false;
    }
  </script>

  <script>
    $(function() {

      var allProducts = [];

      $('#searchAuto').on('focus', function (){
        $.ajax({
          type	: "GET",
          url		: "searchAuto",
          success	: function (data){
            for(let i = 0; i < data.length; i++){
              allProducts.push(data[i].name);
            }
          }
        });
      });

      $( "#searchAuto" ).autocomplete({
        source: allProducts
      });
    });
  </script>
</head>

<body>

<div id="Header">

  <div id="Logo">
    <div id="LogoContent">
      <a href="main"><img src="images/logo-topbar.gif" /></a>
    </div>
  </div>

  <div id="Menu">
    <div id="MenuContent">
      <a href="viewCart"><img align="middle" name="img_cart" src="images/cart.gif" /></a>
      <img align="middle" src="images/separator.gif" />
      <c:if test="${sessionScope.account == null}">
        <a href="#" id="login-link">Sign In</a>
      </c:if>
      <c:if test="${sessionScope.account != null}">
        <a href="signOff">Sign Out</a>
        <!---signOff-->
      </c:if>
      <c:if test="${sessionScope.account != null}">
        <img align="middle" src="images/separator.gif" />
        <a href="editAccount">My Account</a>
      </c:if>
      <img align="middle" src="images/separator.gif" />
      <a href="help.html">?</a>
    </div>
  </div>

  <div id="Search">
    <div id="SearchContent">
      <form action="search" method="post">
        <input type="text" id="searchAuto" name="keyword" size="14" />
        <input type="submit" name="searchProducts" value="Search" />
      </form>
    </div>
  </div>

  <div id="QuickLinks">
    <a href="viewCategory?categoryId=FISH"><img src="images/sm_fish.gif" /></a>
    <img src="images/separator.gif" />
    <a href="viewCategory?categoryId=DOGS"><img src="images/sm_dogs.gif" /></a>
    <img src="images/separator.gif" />
    <a href="viewCategory?categoryId=REPTILES"><img src="images/sm_reptiles.gif" /></a>
    <img src="images/separator.gif" />
    <a href="viewCategory?categoryId=CATS"><img src="images/sm_cats.gif" /></a>
    <img src="images/separator.gif" />
    <a href="viewCategory?categoryId=BIRDS"><img src="images/sm_birds.gif" /></a>
  </div>

</div>

<%@ include file="../account/LoginCard.jsp" %>

<div id="Content">
